<template>
  <div v-loading="qLoading" style="line-height:1.8">
    <div>
      <!--      单选题-->
      <div v-if="qType===0">
        <div class="q-title" v-html="question.theme"/>
        <div class="q-content">
          <el-radio-group v-model="question.blank">
            <el-radio v-for="item in question.optionItem" :key="item.prefix" :label="item.prefix">
              <span class="question-prefix">{{ item.prefix }}. </span>
              <span v-html="item.content" class="q-item-span-content"></span>
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <!--      多选题-->
      <div v-else-if="qType===1">
        <div class="q-title" v-html="question.theme"/>
        <div class="q-content">
          <el-checkbox-group v-model="question.blank">
            <el-checkbox v-for="item in question.optionItem" :label="item.prefix" :key="item.prefix">
              <span class="question-prefix">{{ item.prefix }}. </span>
              <span v-html="item.content" class="q-item-span-content"></span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <!--      判断题-->
      <div v-else-if="qType===2">
        <div class="q-title" v-html="question.theme" style="display: inline;margin-right: 10px"/>
        <span style="padding-right: 10px;">(</span>
        <el-radio-group v-model="question.blank">
          <el-radio v-for="item in question.optionItem" :key="item.prefix" :label="item.prefix">
            {{ item.prefix }}. <span v-html="item.content" class="q-item-span-content"></span>
          </el-radio>
        </el-radio-group>
        <span style="padding-left: 10px;">)</span>
      </div>
      <!--      简答题-->
      <div v-else-if="qType===3">
        <div class="q-title" v-html="question.theme"/>
        <div>
          <el-input v-model="question.blank" type="textarea" rows="5" @focus="inputClick(question,'blank')"></el-input>
        </div>
      </div>
      <div class="question-answer-show-item" style="margin-top: 20px;">
        题目分数: <span style="color: red;">{{ question.title_score }}</span>
      </div>
      <br/>
    </div>
    <el-dialog :visible.sync="richEditor.dialogVisible" append-to-body :close-on-click-modal="false"
               style="width: 100%;height: 100%" :show-close="false" center>
      <Ueditor @ready="editorReady"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editorConfirm">确 定</el-button>
        <el-button @click="richEditor.dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="clearRichEditor">清空</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Ueditor from '@/components/Ueditor'


export default {
  name: 'ShowTitleAnswer',
  components: {Ueditor},
  data() {
    return {
      richEditor: {
        dialogVisible: false,
        object: null,
        parameterName: '',
        instance: null
      },
    }
  },
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    qLoading: {
      type: Boolean,
      default: false
    },
    qType: {
      type: Number,
      default: 0
    }
  },
  methods: {
    editorReady(instance) {
      this.richEditor.instance = instance
      let currentContent = this.richEditor.object[this.richEditor.parameterName]
      this.richEditor.instance.setContent(currentContent)
      this.richEditor.instance.focus(true)
    },
    inputClick(object, parameterName) {
      this.richEditor.object = object
      this.richEditor.parameterName = parameterName
      this.richEditor.dialogVisible = true
    },
    editorConfirm() {
      let content = this.richEditor.instance.getContent()
      this.richEditor.object[this.richEditor.parameterName] = content
      this.richEditor.dialogVisible = false
    },
    clearRichEditor() {
      this.richEditor.instance.setContent('');
    },

  },
  computed: {}
}
</script>
<style scoped>
</style>
